<template>
    <div>
        <!-- 三级列表(商品分类导航) -->
        <NavPage/>

        <!-- 列表 -->
        <ListPage/>

        <!-- 今日推荐 -->
        <RecommendPage/>

        <!-- 商品排行 -->
        <RankPage/>

        <!-- 猜你喜欢 -->
        <LikePage/>

        <!-- 楼层数据 -->
        <FloorPage v-for="item in floorsList" :key="item.id" :floor="item" :id="item.id"/>

        <!-- 商标 -->
        <BrandPage/>
    </div>
</template>


<script>

    // 注册成全局组件不用再引入、注册了
    // import NavPage from '@/components/Navigate'
    import ListPage from './ListContainer'
    import RecommendPage from './Recommend'
    import RankPage from './Rank'
    import LikePage from './Like'
    import FloorPage from './Floor'
    import BrandPage from './Brand'
    import {mapState} from 'vuex'

    export default {    
        name:'HomePage',
        components:{
            // NavPage,
            ListPage,
            RecommendPage,
            RankPage,
            LikePage,
            FloorPage,
            BrandPage
        },
    // 页面中的floors真正楼层，应该是由服务器端响应回来的数据来决定生成的，因此应该动态生成
        mounted() {
            // 获取楼层数据
            // Home决定着要生成几个Floor
            // home组件一挂载，就分发一个获取楼层数据的actions
            this.$store.dispatch('home/getFloorsListData')
        },
        computed:{
            ...mapState('home',['floorsList'])
        }
    }
</script>

<style lang='less' scoped>

</style>